{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-row" style="padding-top: 70px;background: linear-gradient(90deg, #eaf8fd, #fbfeff);">
        <div class="layui-row layui-container">
            <div class="layui-col-md12" style="display: flex;">
                <div class="ml40" style="font-size: 27px;">
                    <strong class="" >{$info.title|default=''}</strong>
                </div>
            </div>
            <div class="layui-col-md12" style="display: flex;">
                <div class="contentWrap ml40 layui-col-md10">
                    <div class="contentLeftWrap">
                        <div class="mr30">
                            <span>章节</span><p class="mt3">{$info['chapter_total']|default=''}</p>
                        </div>
                        <div class="mr30">
                            <span>实战关卡</span><p class="mt3">{$info['employ_total']|default=''}</p>
                        </div>
                        <div class="mr30">
                            <span>实战分数</span><p class="mt3">{$info['employ_gold_total']|default=''}</p>
                        </div>
                        <div class="mr30">
                            <span>学习分数</span><p class="mt3">{$info['study_score_total']|default=''}</p>
                        </div>
                    </div>
                    {if !$is_join}
                    <div class="layui-col-md2">
                        <button class="layui-btn layui-btn-primary layui-bg-blue" lay-on="op_class">
                            加入班级
                        </button>
                    </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
    <div class="layui-container ws-container">
        <div class="layui-row">
            <div class="layui-col-md8">
                <div class="layui-row ml40">
                    <div class="layui-col-md12">
                        <div class="introTitle">
                            <span class="font16" style="display: flex; align-items: center;">
                                课程介绍
                            </span>
                        </div>
                        <div class="markdown-body">
                            {$info.content|raw|default=''}
                        </div>
                    </div>
                </div>
                <div class="layui-row ml40">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                          <li class="layui-this" lay-id="chapterList" style="font-size: 15px;">课程章节</li>
                        </ul>
                        <div class="layui-tab-content">
                          <div class="layui-tab-item layui-show" id="chapterList">
                          </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-row layui-col-space15ml40">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                          <div class="layui-card-header font16" style="margin: 15px 0px;">课程须知</div>
                          <div class="layui-card-body fon16  markdown-body">
                            {$info.details|htmlspecialchars_decode|raw|default=''}
                          </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                          <div class="layui-card-header font16" style="margin: 15px 0px;">
                            <span>
                                <i class="layui-icon layui-icon-user layui-bg-blue"></i> 教学团队
                            </span>
                          </div>
                          <div class="layui-card-body">
                            <div class="layui-row">
                                {if !empty($author_data) }
                                {foreach $author_data as $key => $val}
                                <div class="layui-col-md3" style="padding: 3px;">
                                    <div class="directionItemWrap">
                                        <span>
                                            <img src="{$val['headimg']|default=''}" class="layui-circle" style="width: 100%;">
                                            <div class="layui-elip">{$val['nickname']|default=''}</div>
                                        </span>
                                    </div>
                                </div>
                                {/foreach}
                                {/if}
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="layui-row">
            <div class="layui-col-md12 layui-tree">
                <div class="layui-tree-set layui-tree-setHide">
                    <div class="layui-tree-entry">
                        <div class="layui-col-md12 main_node">
                            <div style="margin-right: 10px;"><i class="layui-icon layui-icon-form" style="color: #18d0e7;"></i> </div>
                            <div class="layui-col-md8" style="display: flex;">
                                <div class="" style="margin-right: 10px;"> <span>1-3 </span> </div>
                                <div class="layui-col-md9"> <span>编译原理实验-GCC/Clang工具链使用 </span> </div>
                            </div>
                            <div class="layui-col-md1">1111
                                <i class="layui-icon layui-colla-icon"></i>
                            </div>
                            </div>
                    </div>
                    <div class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine">
                        <div class="layui-row layui-tree-set">
                            <div class="layui-col-md12" style="margin: 10px 0px;">            <ul><li>    <div class="layui-row">        <div class="layui-col-md12 main_node">            <div style="margin-right: 10px;"><i class="layui-icon layui-icon-form" style="color: #18d0e7;"></i>            </div>            <div class="layui-col-md8" style="display: flex;">                <div class="" style="margin-right: 10px;">                    <span>1-1                     </span>                </div>                <div class="layui-col-md9">                    <span>编译原理实验-课程练习                     </span>                </div>            </div>            <div class="layui-col-md4 button_node">                <div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-sm" lay-on="study">开始学习</button>                </div>            </div>        </div>    </div></li><li>    <div class="layui-row">        <div class="layui-col-md12 main_node">            <div style="margin-right: 10px;"><i class="layui-icon layui-icon-senior" style="color: #0152d9;"></i>            </div>            <div class="layui-col-md8" style="display: flex;">                <div class="" style="margin-right: 10px;">                    <span>1-2                     </span>                </div>                <div class="layui-col-md9">                    <span>编译实验工具简介                     </span>                </div>            </div>            <div class="layui-col-md4 button_node">                <div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-sm" mid="3" lay-on="detail">查看详情</button><button type="button" class="layui-btn layui-btn-sm" mid="3" lay-on="train">开始实战</button>                </div>            </div>        </div>    </div></li><li>    <div class="layui-row">        <div class="layui-col-md12 main_node layui-tree">            <div style="margin-right: 10px;"><i class="layui-icon layui-icon-form" style="color: #18d0e7;"></i>            </div>            <div class="layui-col-md8" style="display: flex;">                <div class="" style="margin-right: 10px;">                    <span>1-3                     </span>                </div>                <div class="layui-col-md9">                    <span>编译原理实验-GCC/Clang工具链使用                     </span>                </div>            </div>            <div class="layui-col-md4 button_node">                <div class="layui-btn-container"><button type="button" class="layui-btn layui-btn-sm" lay-on="study">开始学习</button>                </div>            </div>        </div>    </div></li>            </ul>        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    {include file='/public/index-foot'}
</body>
<div class="layui-card" id="getTaskClass" style="display: none;">
    <div class="layui-card-body padding-left-40">
        <div class="layui-row">
            <input type="hidden" name="cl_id" value="{$classList[0]['id']|default=''}">
            <div class="layui-col-md12">
                <table class="layui-table" lay-even id="classList"></table>
            </div>
            <div class="layui-col-md12" style="margin-top: 10px;">
                <div class="layui-form">
                    <textarea name="apply_reason" placeholder="申请理由" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .contentWrap {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        position: relative
    }
    .contentLeftWrap {
        display: flex;
        font-size: 14px;
        text-align: center
    }
    .mr30 {
        margin-right: 30px
    }
    .ml40 {
        margin-left: 40px;
    }
    .mt3 {
        margin-top: 3px
    }
    .introTitle {
        margin-bottom: 20px
    }

    li,ol,ul {
        list-style-type: none
    }

    dl,ol,ul {
        margin-bottom: 0
    }

    .font16 {
        font-size: 16px;
        font-weight: 700
    }
    .layui-tab-brief>.layui-tab-title .layui-this {
        color: #3061d0;
    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after,.layui-tab-brief>.layui-tab-title .layui-this:after {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #3061d0;
    }
    .layui-btn-container .layui-btn {
        margin-bottom: 0px;
        background-color: #3061d0;
    }
    .directionItemWrap {
        text-align: center
    }
    .button_node {
        display: none;
    }
    .main_node {
        display: flex;
        margin: 0px 0px 10px 0px;
        align-items: center;
        height: 35px;
    }
    .main_node:hover {
        background-color: #f1f4f9;
        cursor: pointer;
    }
    .main_node:hover .button_node {
        display: block;
    }
    .layui-colla-icon {
        left: unset;
        right: 10px;
    }
</style>
<script type="text/javascript">
    $(function () {
        layui.use(['element', 'util', 'table', 'layer'], function(){
            let element = layui.element;
            let util = layui.util;
            let table = layui.table;
            let layer = layui.layer;
            // 加载章节
            function load_chapter() {
                let data = {
                    id : '{$info.id|default=0}'
                }
                httpRequest('{:sysuri("chapter_list")}', data, 'post', function (info, ret_data) {
                    if(ret_data){
                        let html = '<div class="layui-collapse">';
                        $.each(ret_data, function (index, item) {
                            let sub_html = '';
                            if(item.sub){
                                $.each(item.sub, function (s_index, s_item) {
                                    let button_str = '';
                                    if(s_item.type == 3){
                                        button_str = '<button type="button" class="layui-btn layui-btn-sm" mid="'+s_item.employ_id+'" lay-on="detail">查看详情</button>'+
                                        '<button type="button" class="layui-btn layui-btn-sm" mid="'+s_item.employ_id+'" lay-on="train">开始实战</button>';
                                    }else{
                                        button_str = '<button type="button" class="layui-btn layui-btn-sm" mid="'+s_item.id+'" lay-on="study">开始学习</button>';
                                    }
                                    
                                    let i_str = '';
                                    if(s_item.type == 3){
                                        i_str = '<i class="layui-icon layui-icon-senior" style="color: #0152d9;"></i>';
                                    }else if(s_item.type == 2){
                                        i_str = '<i class="layui-icon layui-icon-video" style="color: #8c18ff;"></i>';
                                    }else{
                                        i_str = '<i class="layui-icon layui-icon-form" style="color: #18d0e7;"></i>';
                                    }
                                    sub_html += '<li>'+
                                                '    <div class="layui-row">'+
                                                '        <div class="layui-col-md12 main_node" >'+
                                                '            <div style="margin-right: 10px;">'+i_str+
                                                '            </div>'+
                                                '            <div class="layui-col-md8" style="display: flex;">'+
                                                '                <div class="" style="margin-right: 10px;">'+
                                                '                    <span>'+(index+1)+'-'+(s_index+1)+
                                                '                     </span>'+
                                                '                </div>'+
                                                '                <div class="layui-col-md9">'+
                                                '                    <span>'+s_item.title+
                                                '                     </span>'+
                                                '                </div>'+
                                                '            </div>'+
                                                '            <div class="layui-col-md4 button_node">'+
                                                '                <div class="layui-btn-container">'+button_str+
                                                '                </div>'+
                                                '            </div>'+
                                                '        </div>'+
                                                '    </div>'+
                                                '</li>';
                                });
                            }
                            html += '<div class="layui-colla-item">'+
                                    '  <div class="layui-colla-title">'+item.title+
                                    '    </div>'+
                                    '  <div class="layui-colla-content">'+
                                    '    <div class="layui-row" style="padding: 0px 20px;">'+
                                    '        <div class="layui-col-md12">'+
                                    '            <div class="markdown-body">'+item.details+
                                    '            </div>'+
                                    '        </div>'+
                                    '        <div class="layui-col-md12" style="margin: 10px 0px;">'+
                                    '            <ul>'+sub_html+
                                    '            </ul>'+
                                    '        </div>'+
                                    '    </div>'+
                                    '  </div>'+
                                    '</div>';
                        })
                        html += '</div>';
                        $('#chapterList').empty().html(html);
                        // 重新渲染
                        element.render();
                    }
                },function(info, data, code) {
                    $.msg.error(info, 3, function () {
                        switch (code) {
                            case -1200:
                                util.openWin({
                                    url: data
                                });
                                break;
                            default:
                                break;
                        }
                    });
                })
            }
            // 加载章节列表
            load_chapter();

            util.on({
                'detail': function () {
                    let mid = $(this).attr('mid');
                    util.openWin({
                        url:"{:sysuri('practice.train/detail')}"+"?id="+mid,
                    })
                },
                'train': function () {
                    let mid = $(this).attr('mid');
                    util.openWin({
                        url:"{:sysuri('info.index/index')}"+"?employ_id="+mid+"&task_id="+"{$info.id}",
                    })
                },
                'study': function () {
                    let mid = $(this).attr('mid');
                    util.openWin({
                        url:"{:sysuri('study')}"+"?task_id="+"{$info.id}&cp_id="+mid,
                    })
                },
                'op_class' : function () {
                    let t_row = {}
                    layer.open({
                        type: 1,
                        title: '班级列表',
                        area: ['750px', '500px'],
                        offset: 'auto',
                        content: $('#getTaskClass'),
                        btn: ['申请加入', '取消'],
                        btnAlign: 'c',
                        success: function(layero, index, that){
                            let table_obj = table.render({
                                elem: '#classList', // 绑定元素选择器
                                data: JSON.parse('{:json_encode($classList)}'),
                                cols: [[
                                    {type: 'radio', title: '', fixed: true}, // 单选框
                                    {field: 'name', title:'{:lang("班级名称")}', width: 150},
                                    {field: 'info', title: '{:lang("班级简介")}', minWidth: 150},
                                    {field: 'nickname', title: '{:lang("老师")}', minWidth: 150},
                                    {field: 'platform_name', title: '{:lang("平台")}', minWidth: 150},
                                ]]
                            })

                            // 单选框事件
                            table.on('radio(classList)', function(obj){
                                //console.log(obj); // 当前行的一些常用操作集合
                                //console.log(obj.checked); // 当前是否选中状态
                                //console.log(obj.data); // 选中行的相关数据
                                t_row = obj.data;
                            });
                        },
                        yes: function(index, layero){
                            let reason = $('textarea[name="apply_reason"]').val();
                            let data = {
                                c_id : t_row.id,
                                reason : reason
                            }
                            httpRequest('{:sysuri("jonclass")}', data, 'post', function(info, data) {
                                $.msg.success(info, 3, function () {
                                    layer.close(index);
                                });
                            }, function(info, data, code) {
                                $.msg.error(info, 3, function () {
                                    $('textarea[name="apply_reason"]').val('');
                                    layer.close(index);
                                    switch (code) {
                                        case -1200:
                                            util.openWin({
                                                url: data
                                            });
                                            break;
                                        case -1201:
                                            $.form.goto(data);
                                            break;
                                        default:
                                            break;
                                    }
                                });
                            })
                        },
                        cancel: function(index, layero){
                            layer.close(index);
                        }
                    })
                }
            })
        });
    })
</script>
